<template>
  <div class="attack-page">
    <TimeRadio
        v-model="datePickerValue"
        defaultTimeRadioValue="1m"
        @change="datePickerChange"
        :timeRadioValues="[
        { label: '近1天', value: '0d' },
        { label: '近7天', value: '6d' },
        { label: '近30天', value: '1m' },
      ]"
    >
    </TimeRadio>
    <BlockTitle title="攻击者情况"/>
    <div class="attack-container">
      <ul class="type-area">
        <li class="organize" :class="attackViewActive === 2 && 'view-active'" @click.stop="attackViewClick(2)">
          <img class="image" src="./assets/org.png" alt="">
          <div class="info">
            <div class="num">{{ attackView.attackOrgNum }}</div>
            <div class="text">攻击组织</div>
          </div>
        </li>
        <li class="domain" :class="attackViewActive === 3 && 'view-active'" @click.stop="attackViewClick(3)">
          <img class="image" src="./assets/domain.png" alt="">
          <div class="info">
            <div class="num">{{ attackView.maliciousDomainNum }}</div>
            <div class="text">恶意域名</div>
          </div>
        </li>
        <li class="ip" :class="attackViewActive === 4 && 'view-active'" @click.stop="attackViewClick(4)">
          <img class="image" src="./assets/ip.png" alt="">
          <div class="info">
            <div class="num">{{ attackView.maliciousIpNum }}</div>
            <div class="text">恶意IP</div>
          </div>
        </li>
      </ul>
      <EventLine ref="eventLine" :date-picker-value="propDateValue" :view-type="attackViewActive"/>
      <template v-if="attackViewActive === 2">
        <CalendarMap ref="calendarMap" :date-picker-value="propDateValue" :view-type="attackViewActive"/>
      </template>
      <template v-else>
        <CityRankArea ref="cityRankArea" :date-picker-value="propDateValue" :view-type="attackViewActive"/>
      </template>
      <TopRankArea ref="topRankArea" :date-picker-value="propDateValue" :view-type="attackViewActive"/>
    </div>
    <BlockTitle :title="cardTitle"/>
    <SearchArea ref="searchArea" :date-picker-value="propDateValue" :view-type="attackViewActive"/>
  </div>
</template>

<script>
import  { formatTimeByMoment } from '@/utils/time.js'
import BlockTitle from '@/components/BlockTitle.vue';
import TimeRadio from '@/components/TimeRadio.vue';
import EventLine from './components/EventLine.vue';
import CalendarMap from './components/CalendarMap.vue';
import CityRankArea from './components/CityRankArea.vue';
import TopRankArea from './components/TopRankArea.vue';
import SearchArea from './components/SearchArea.vue';

export default {
  name: "AttackAnglePage",
  data() {
    return {
      // 时间
      datePickerValue: [],
      //props时间
      propDateValue: [],
      // 攻击者数量基本情况
      attackViewActive: 2,
      attackView: {
        attackOrgNum: 0, // viewType 2 攻击组织
        maliciousDomainNum: 0, // viewType 3 恶意域名
        maliciousIpNum: 0, // viewType 4 恶意IP
      }
    };
  },
  components: {BlockTitle, TimeRadio, CalendarMap, EventLine,TopRankArea,CityRankArea, SearchArea},
  computed: {
    cardTitle() {
      switch (this.attackViewActive) {
        case 2:
          return '攻击组织';
        case 3:
          return '恶意域名';
        case 4:
          return '恶意IP';
      }
    }
  },
  mounted() {
  },
  methods: {
    datePickerChange() {
      this.propDateValue[0] = formatTimeByMoment(this.datePickerValue[0],'YYYYMMDD');
      this.propDateValue[1] = formatTimeByMoment(this.datePickerValue[1],'YYYYMMDD');
      this.getViewData();
      this.getCardData();
    },
    getViewData() {
      const that = this;
      new Promise((resolve) => {
        resolve(true)
      }).then(() => {
        this.attackView = {
          attackOrgNum: 12,
          maliciousDomainNum: 14,
          maliciousIpNum: 15,
        }
      })
    },
    // 获取各类卡片数据
    getCardData() {
      new Promise((resolve) => {
        resolve(true)
      }).then(() => {
        this.$refs.eventLine.initComp();
        if (this.attackViewActive === 2) {
          this.$refs.calendarMap.initComp();
        } else {
          this.$refs.cityRankArea.initComp();
        }
        this.$refs.topRankArea.initComp();
        this.$refs.searchArea.initComp();
      })
    },
    // 攻击视图切换
    attackViewClick(val) {
      if (val === this.attackViewActive) {
        return null;
      }
      this.attackViewActive = val;
      this.getCardData();
    }
  }
}
</script>


<style lang="scss">
.attack-page {
  .attack-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .type-area {
      flex: 0 0 280px;

      > li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        padding: 10px 20px;
        background: #dfe3fa;
        border-radius: 24px 0 24px 0;
        cursor: pointer;

        .image {
          flex: 0 0 45px;
          width: 45px;
          height: 45px;
          margin-right: 20px;
        }

        .info {
          flex: 1;
          font-weight: bold;

          .num {
            font-size: 26px;
            color: #000;
            margin-bottom: 10px;
          }

          .text {
            font-size: 16px;
            color: rgb(128, 129, 145);
          }
        }

        &.organize {
          height: 100px;
          border: 1px solid #e1e3ed;
          padding: 15px 20px;
          border-radius: 8px;
          background: none;

          .image {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
          }

          .num {
            color: rgb(245, 158, 59);
          }

          &.view-active {
            background: rgb(237, 120, 84);
            border: none;
          }
        }

        &.domain {
          margin: 20px 0;
        }

        &.view-active {
          background: rgb(67, 107, 217);

          .num {
            color: #ffffff;
          }

          .text {
            color: #ffffff;
          }
        }
      }
    }
  }
}


</style>